<template>
  <div id="fhed">
    <div class="nav">
      <ul>
        <div><i class="iconfont icon-wrench-fill" />  预约维修服务</div>
        <div><i class="iconfont icon-7" />  7天无理由退货</div>
        <div><i class="iconfont icon-15" />  15天免费换货</div>
        <div><i class="iconfont icon-weibiaoti-" />  满69包邮</div>
        <div><i class="iconfont icon-weizhi" />  520余家售后网点</div>
      </ul>
    </div>
    <div class="need">
     <div class="left">
       <dl>
       <dt>帮助中心</dt>
       <a href=""><dd>账户管理</dd></a>
       <a href=""><dd>购物指南</dd></a>
       <a href=""><dd>订单操作</dd></a>
     </dl>
     <dl>
       <dt>服务支持</dt>
       <a href=""><dd>售后政策</dd></a>
       <a href=""><dd>自助服务</dd></a>
       <a href=""><dd>相关下载</dd></a>
     </dl>
     <dl>
       <dt>线下门店</dt>
       <a href=""><dd>小米之家</dd></a>
       <a href=""><dd>服务网点</dd></a>
       <a href=""><dd>授权体验店</dd></a>
     </dl>
     <dl>
       <dt>关于小米</dt>
       <a href=""><dd>了解小米</dd></a>
       <a href=""><dd>加入小米</dd></a>
       <a href=""><dd>投资者关系</dd></a>
       <a href=""><dd>企业社会责任</dd></a>
       <a href=""><dd>廉洁举报</dd></a>
     </dl>
      <dl>
       <dt>关于我们</dt>
       <a href=""><dd>新浪微博</dd></a>
       <a href=""><dd>官方微信</dd></a>
       <a href=""><dd>联系我们</dd></a>
       <a href=""><dd>公益基金会</dd></a>
     </dl>
     <dl>
       <dt>特色服务</dt>
       <a href=""><dd>F 码通道</dd></a>
       <a href=""><dd>礼物码</dd></a>
       <a href=""><dd>防伪查询</dd></a>
     </dl>
     <div class="right">
       <p>400-100-5678</p>
       <p>8:00-18:00 (仅收市话费)</p>
       <p><button>人工客服</button></p>
       <p>关注小米:<i class="mb"></i><i class="wx"></i> </p>
     </div>
     </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
#fhed{
  margin: 0 190px;
  .nav{
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    ul{
      width: 112%;
      white-space:nowrap;
      div{
        display: inline-block;
        padding: 30px 84px;
        font-size: 16px;
      }
      div:last-of-type{
        padding-right: 0;
      }
      li{
        display: inline-block;
        color: #616161;
        border-left: 1px solid #e0e0e0;
        font-size: 18px;
        margin: 27px 67px;
        &:hover{
          color: #ff6700;
        }
      }
      li:first-of-type{
        border-left: 0;
      }
    }
  }
  .need{
    padding: 40px 0;
    .left{
      width: 95%;
      display: flex;
      flex-direction: row;
      dl{
      dt{
        width: 180px;
        margin: -1px 0 26px;
        font-size: 20px;
      }
      dd{
        font-size: 12px;
        margin: 10px 0 0;
        color: #000;
        &:hover{
          color: #ff6700;
        }
      }
      dl,dt:last-of-type{
        margin-right: 5px;
      }
    }
    .right{
      margin-left: 45px;
      border-left: 1px solid #e0e0e0;
      padding-left: 50px;
      p:first-of-type{
        display: inline-block;
        color:#ff6700;
        font-size: 23px;
        padding-left: 5px;
        h1{
          font-weight: normal;
        }
      }
      p:nth-of-type(2){
        font-size: 13px;
      }
      p{
        margin: 0 0 5px 0;
        button{
          width: 120px;
          height: 30px;
          color: #ff6700;
          background-color: #fff;
          border: 1px solid #ff6700;
          margin-left: 30px;
          &:hover{
            color: #fff;
            background-color: #ff6700;
            transition: all .4s;
          }
        }
        .mb{
          display: inline-block;
          background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png);
          width: 24px;
          height: 24px;
          background-size: cover;
          margin: 3px 0 -5px 6px;
          border: 0 transparent;
          &:hover{
            background-color: #ff6700;
          }
        }
        .wx{
          display: inline-block;
          background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png);
          width: 24px;
          height: 24px;
          background-size: cover;
          border: 0 transparent;
          &:hover{
            background-color: #ff6700;
            overflow: hidden;
          }
        }
      }
      p:last-of-type{
          margin-left: 10px;
        }
        i{
      margin-bottom: -5px;
    }
    }
    }
  }
}
</style>